<template>
  <div class="edit-input-view">
    <t-button class="common-button" theme="primary" @click="edit">{{ btnText }}</t-button>
    <span v-if="!isEdit" class="text">已设置</span>
    <input-view v-if="isEdit" :item="item" @change="inputChange"></input-view>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import InputView from './InputView.vue';

const props = defineProps({
  item: {
    type: Object as any,
    default: () => {
      return [];
    },
  },
  modelValue: {
    type: String,
    default: '',
  },
  itemValue: {
    type: String,
    default: '',
  },
});

const emits = defineEmits(['change', 'update:modelValue']);

const inputValue = ref('');
const isEdit = ref(false); // 是否在编辑状态

const btnText = computed(() => {
  return isEdit.value ? '取消修改' : '修改';
});

const edit = () => {
  isEdit.value = !isEdit.value;
  if (!isEdit.value) {
    inputChange(props.item.saveValue || '');
  } else {
    inputChange('');
  }
};

const inputChange = (val: string) => {
  emits('change', val);
  emits('update:modelValue', val);
};

watch(
  () => props.modelValue,
  (val) => {
    inputValue.value = val;
  },
  { immediate: true },
);
</script>

<style lang="less" scoped>
.edit-input-view {
  display: flex;
  gap: 20px;
  align-items: center;

  .text {
    color: #333;
  }

  .common-button,
  .text,
  .input-view {
    flex-shrink: 0;
  }
}
</style>
